<template>
  <!-- 设备编辑 -->
  <el-dialog
    top="15vh"
    :title="$t('add.add74')"
    :visible.sync="dialogShow"
    width="561px"
    height="262px"
    @close="cancleHandle"
    :close-on-click-modal="false"
  >
    <div class="equipmentAdd_inner">
      <el-form
        ref="form"
        label-position="top"
        label-width="100px"
        :model="form"
        :size="formItemSize"
      >
        <el-form-item>
          <el-select
            v-model="form.authDeptList"
            :placeholder="$t('jigou.jigou18')"
            :remote-method="onNameChange"
            clearable
            filterable
            remote
            :reserve-keyword="false"
          >
            <el-option
              v-for="item in nameOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button plain :size="optionButtonSize" @click="cancleHandle">{{
        $t('equipmentManagement.shebei51')
      }}</el-button>
      <el-button type="primary" :size="optionButtonSize" @click="submitHandle">{{
        $t('equipmentManagement.shebei52')
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'BLZMasterIndex',
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      dialogShow: false,
      form: {
        authDeptList: [],
        authDeptNameList: [],
      },

      nameOptions: [],
      allNameOptions: [],
    };
  },

  mounted() {},

  methods: {
    onNameChange(v) {
      this.$http
        .get('/sys/organized/joiningInstitutions', {
          params: {
            joiningType: '2',
            joiningName: v,
          },
        })
        .then(({ data: res }) => {
          this.nameOptions = res.data;
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    // 取消
    cancleHandle() {
      this.dialogShow = false;
      this.form = {
        bindStatus: '', // 绑定状态

        authDeptList: [],
      };
    },
    // 保存
    submitHandle() {
      console.log('---this.form', this.form, this.nameOptions);
      this.nameOptions.forEach((item) => {
        if (item.id === this.form.authDeptList) {
          this.form.authDeptNameList = item.name;
        }
      });
      let param = {
        ...this.detailData,
        authDeptList: [this.form.authDeptList],
        authDeptNameList: [this.form.authDeptNameList],
      };

      this.$http
        .post('/device/edit', param)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('equipmentManagement.shebei79'));
            this.$emit('getDetailList');
            this.dialogShow = false;
            this.form = {
              bindStatus: '', // 绑定状态
              authDeptList: [],
            };
          }
        })
        .catch((err) => {
          console.log('err', err);
          this.$message.error(err);
        });
    },
  },
};
</script>

<style lang="scss">
.equipmentAdd_inner {
  .el-select {
    width: 100%;
  }
}
</style>
